<template>
  <div class="content">
    <div class="page-content">
      <Navigation
          :navigation-list="[{id:1,value:'首页',url:'/home/index'},{id:3,value:'简历详情',url:''}]"></Navigation>
      <div class="block">
        <div class="position-info-block">
          <div class="recruiters-info">
            <div class="info-block">
              <img :src="info.faceUrl" alt="" class="recruiters-photo">
              <div class="info">
                <div class="name-block">
                  <div class="list-block">
                    <div class="name">{{info.realName}}</div>
                    <div class="authentication">7日活跃</div></div>

                  <div class="btn2" v-if="lookType===2" @click="addLookMe">关注</div>
                  <div class="btn2" v-if="lookType===1" @click="insertLookMe"  style="border: 1px solid #ff7626; color: #ff7626; background: none">已关注</div>
                </div>
                <div class="other-block">
                  <div class="other-item" v-if="info.workTime==='工作0年'">工作经验小于1年</div>
                  <div class="other-item" v-else>{{info.workTime}}</div>
                  <div class="other-item">{{info.birthday}}</div>
                </div>
                <div class="other-block">
                  <div><i class="iconfont icon-xuesheng"></i>{{info.education}}</div>
                </div>
              </div>
            </div>
            <div class="info-item">
              <div  class="txt" >{{info.introduce}}</div>
            </div>
            <div class="block-title">
              <div class="title-item">
                <div class="line"></div>
                <div class="title">求职意向</div>
              </div>

                <div v-loading="objectiveLoading">
                  <template v-if="objective.length>0">
                  <div class="title-name" v-for="(item) in objective" :key="item.id">
                    <div class="name-item">{{item.postName}}&nbsp;&nbsp;<span>/</span></div>
                    <div class="name-item">&nbsp;&nbsp;{{item.regArea}}&nbsp;&nbsp;<span>/</span></div>
                    <div class="name-item">&nbsp;&nbsp;{{item.salaryMin}}-{{item.salaryMax}}元</div>
                  </div>
                  </template>
                  <el-empty v-else></el-empty>
                </div>

            </div>

            <div class="work-block">
              <div class="title-item">
                <div class="line"></div>
                <div class="title">工作经历</div>
              </div>

                <div v-loading="workExpListLoading">
                  <template  v-if="workExpList.length>0">
                  <div class="work-info" v-for="(item,index) in workExpList" :key="item.id">
                    <div class="work-item" >
                      <div class="work-name">公司名称：{{item.companyName}}</div>
                      <div class="wage-item">
                        <div class="post">工作岗位：{{item.postName}}</div>
                        <div class="wage">{{item.wage}}</div>
                        <div class="time">{{item.workTimeStart}}至{{item.workTimeEnd}}</div>
                      </div>
<!--                      <div class="department">所属部门：{{item.industry}}</div>-->
                      <div class="describe">工作描述：{{item.duty}}</div>
                      <div class="contribution">{{item.contribution}}</div>
                    </div>
                  </div>
                  </template>
                  <el-empty v-else></el-empty>
                </div>

            </div>
            <div class="work-block">
              <div class="title-item">
                <div class="line"></div>
                <div class="title">项目经验</div>
              </div>

                <div v-loading="itemExpListLoading">
                  <template v-if="itemExpList.length>0">
                  <div class="work-info" v-for="(item,index) in itemExpList" :key="item.id">
                    <div class="work-item" >
                      <div class="wage-item">
                        <div class="work-name">项目名称：{{item.itemName}}</div>
                        <div class="time">{{item.startTime}}至{{item.endTime}}</div>
                      </div>
                      <div class="describe">项目描述：{{item.itemContent}}</div>
                      <div class="contribution">{{item.contribution}}</div>
                    </div>
                  </div>
                  </template>
                  <el-empty v-else></el-empty>
                </div>
            </div>
            <div class="education-block">
              <div class="title-item">
                <div class="line"></div>
                <div class="title">教育经历</div>
              </div>

                <div v-loading="educationLoading">
                  <template v-if="education.length>0">
                  <div class="education-info" v-for="(item,index) in education" :key="item.id">
                    <div class="education-item">
                      <div class="name-item">
                        <div class="education-name">{{item.schoolName}}</div>
                        <div class="authentication">统招</div>
                      </div>
                      <div class="wage-item">
                        <div class="post">{{item.major}}·{{item.educationText}}</div>
                        <div class="time">{{item.startTime}}至{{item.endTime}}</div>
                      </div>
                    </div>
                  </div>
                  </template>
                  <el-empty v-else></el-empty>
                </div>

            </div>
            <div class="language-block">
              <div class="title-item">
                <div class="line"></div>
                <div class="title">语言能力</div>
              </div>

                <div v-loading="languageLoading">
                  <template v-if="language.length>0">
                  <div class="language-info" v-for="(item,index) in language" :key="item.id">
                    <div class="authentication">{{item.languagesText}}</div>
                    <div class="authentication">{{item.redAndWrtText}}</div>
                  </div>
                  </template>
                  <el-empty v-else></el-empty>
                </div>

            </div>
            <div class="block-title">
              <div class="title-item">
                <div class="line"></div>
                <div class="title">附加信息</div>
              </div>
              <div v-if="addition">
                <div v-loading="additionLoading">
                  <div class="title-name" style="white-space: pre-wrap;" v-html="addition">
                  </div>
                </div>
              </div>
              <el-empty v-else></el-empty>
            </div>
          </div>
        </div>
        <div class="company-block">
          <div class="title">觉得TA还不错：</div>
          <div class="chat" @click="test">立即沟通</div>
        </div>
      </div>
    </div>
    <el-dialog title="请选择您沟通的岗位" v-if="dialogVisible" :visible.sync="dialogVisible" width="40%"
               :close-on-click-modal="false" :close-on-press-escape="false" top="15vh" :destroy-on-close="true">
      <ChoosePosition ref="choose" @child="receive"></ChoosePosition>
      <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" class="primary" @click="$refs.choose.submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Navigation from "@/components/Navigation/Navigation";
import {sendHiMessage} from "@/utils/im";
import {insertLookMeApi} from "@/api/attention";
import {getCusEducationApi, getIntentionApi, getItemExpApi, getLangByIdApi, getWorkExpApi,getCustomerApi} from "@/api/personal";
import {getAddition as getAdditionApi, getEducationList} from "@/api/mineCenter";
import ChoosePosition from "@/components/ChoosePosition/ChoosePosition";
import {mapGetters} from "vuex";
export default {
  name: "PersonnelDetail",
  components: {ChoosePosition, Navigation},
  data() {
    return {
      info:{
        realName:'',
        birthday:'',
        workTime:'',
        faceUrl:'',
        education:'',
        introduce:'',
        telPhone:''
      },
      dialogVisible:false,

      objectiveLoading:false,
      objective:[],

      workExpListLoading:false,
      workExpList:[],

      itemExpListLoading:false,
      itemExpList:[],

      educationLoading:false,
      education:[],

      languageLoading:false,
      language:[],

      additionLoading:false,
      addition:[],

      lookType: 0,
    }
  },
  methods:{
    receive(e){
      this.dialogVisible=false
      sendHiMessage('你好，请问近期在看新的工作机会吗？',this.info.telPhone,e).then(()=>{
        this.$router.push({
          name:'Chat'
        })
      })
    },
    test(){
      if(this.user.authenticationStatus==9)
      {
        this.dialogVisible = true;
      }else{
        this.$message.info('信息审核未通过');
      }

    },
    addLookMe(){
      const loading = this.$loading({text: '关注中'})
      insertLookMeApi({cid:this.id,userType:2,lookMeType:2,state:2}).then((res)=>{
        loading.close()
        this.$message.success('关注成功')
        this.getPersonal()
      }).finally(()=>{
        loading.close()
      })
    },
    insertLookMe(){
      const loading = this.$loading({text: '取消关注中'})
      insertLookMeApi({cid:this.id,userType:2,lookMeType:2,state:1}).then((res)=>{
        loading.close()
        this.$message.success('取消关注成功')
        this.getPersonal()
      }).finally(()=>{
        loading.close()
      })
    },
    LookMe(){
      insertLookMeApi({cid:this.id,userType:2,lookMeType:1,state:2}).then((res)=>{
      }).finally(()=>{
      })
    },
    getPersonal(){
      getCustomerApi({id:this.id}).then((res)=>{
        if(res.code==405){
          this.$router.push({
            path: '/404'
          })
        }
        else{
          this.info=res??[];
          this.lookType=res.lookType
        }
      }).finally(()=>{
      })
    },
    getIntention(){
      this.objectiveLoading=true
      getIntentionApi({id:this.id}).then((res)=>{
        this.objective=res??[]
      }).finally(()=>{
        this.objectiveLoading=false
      })
    },
    getItemExp(){
      this.itemExpListLoading=true
      getItemExpApi({id:this.id}).then((res)=>{
        this.itemExpList=res??[]
      }).finally(()=>{
        this.itemExpListLoading=false
      })
    },
    getWorkExp(){
      this.workExpListLoading=true
      getWorkExpApi({id:this.id}).then((res)=>{
        this.workExpList=res??[]
      }).finally(()=>{
        this.workExpListLoading=false
      })
    },
    getCusEducation(){
      this.educationLoading=true
      getEducationList({customerId:this.id}).then((res)=>{
        this.education=res??[]
      }).finally(()=>{
        this.educationLoading=false
      })
    },
    getLangById(){
      this.languageLoading=true
      getLangByIdApi({id:this.id}).then((res)=>{
        this.language=res??[]
      }).finally(()=>{
        this.languageLoading=false
      })
    },
    //获取附加信息
    getAddition() {
      this.additionLoading = true
      getAdditionApi({id:this.id}).then((res) => {
        this.addition = res?.data ?? '';

      }).finally(() => {
        this.additionLoading = false
      })
    },
  },
  computed: {
    ...mapGetters(['user'])
  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    this.getPersonal()
    this.getIntention()
    this.getItemExp()
    this.getWorkExp()
    this.getCusEducation()
    this.getLangById()
    this.getAddition()
    if(this.user.authenticationStatus == 9){
      this.LookMe()
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  .page-content {
    width: $contentWidth;
    min-height: $fullMinHeight;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .block{
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      height: auto;

      .position-info-block{
        width: calc(100% - 340px);
        margin-right: 30px;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        min-width: 70%;
        .recruiters-info{
          padding: 20px;
          width: 100%;
          height: auto;
          background: #fff;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          margin-bottom: 20px;
          .info-block{
            display: flex;
            flex-direction: row;
            .recruiters-photo{
              width: 85px;
              height: 85px;
              border-radius: 50%;
            }
            .info{
              width: 100%;
              margin-left: 20px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              .name-block{
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                .list-block{
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  .name{
                    font-size: 22px;
                    font-weight: bold;
                  }
                  .authentication{
                    background: #E8F3E3;
                    padding: 2px 4px;
                    font-size: 12px;
                    border-radius: 3px;
                    margin-left: 10px;
                    color: #58BD61;
                  }
                  .time{
                    font-size: 11px;
                    color: $darkGray;
                    margin-left: 370px;
                  }
                }
                .btn2{
                  width: 70px;
                  height: 30px;
                }
              }
              .other-block{
                font-size: 14px;
                margin-top: 10px;
                display: flex;
                flex-direction: row;

                .other-item{
                  margin-right: 8px;
                }
              }

            }
          }
          .info-item{
            font-size: 15px;
            margin-top: 30px;
            .txt {
              margin-right: 20px;
              text-align: justify;
              word-break: break-word; //换行模式
            }
            .hide-btn {
              display: flex;
              justify-content: flex-end;
              color: $orange;
              font-size: 15px;
              margin-right: 20px;
            }
            .hide{
              word-break: break-all;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          .block-title{
            border-bottom: #e4e4e4 1px solid;
            display: flex;
            flex-direction:column;
            margin-top: 10px;
            .title-item{
              display: flex;
              flex-direction: row;
              margin-top: 10px;
              .line {
                margin-top: 3px;
                height: 18px;
                width: 6px;
                background: $red;
                border-radius: 20px;
                margin-right: 10px;
              }
              .title{
                font-size: 18px;
                font-weight: bold;
              }
            }
            .title-name{
              font-size: 15px;
              display: flex;
              flex-direction: row;
              margin-top: 10px;
              .name-item{
                margin-bottom: 20px;
              }
              .name-item:last-child{
                border-right: 0px;
              }
            }
          }
          .work-block{
            border-bottom: #e4e4e4 1px solid;
            .title-item{
              display: flex;
              flex-direction: row;
              margin-top: 10px;
              .line {
                margin-top: 3px;
                height: 18px;
                width: 6px;
                background: $red;
                border-radius: 20px;
                margin-right: 10px;
              }
              .title{
                font-size: 17px;
                font-weight: bold;
              }
            }
            .work-info{
              display: flex;
              flex-direction: column;
              margin-top: 20px;
              margin-left: 20px;

              .work-item{
                .work-name{
                  font-size: 16px;
                  font-weight: bold;
                }
                .wage-item{
                  display: flex;
                  flex-direction: row;
                  font-size: 13px;
                  margin-top: 5px;
                  justify-content: space-between;
                  .post{
                    margin-right: 20px;
                    font-weight: bold;
                  }
                  .time{
                    color: $darkGray;
                    margin-top: -30px;
                  }
                }
                .department{
                  //color: $darkGray;
                  //font-size: 10px;
                  font-size: 13px;
                  margin-top: 10px;
                }
                .describe{
                  font-size: 13px;
                  margin-top: 15px;
                  line-height: 1.8;
                }
                .contribution{
                  font-size: 13px;
                  margin-top: 5px;
                  line-height: 1.8;
                  margin-right: 100px;
                  margin-bottom: 50px;
                }
              }
            }
          }
          .education-block{
            border-bottom: #e4e4e4 1px solid;
            .title-item{
              display: flex;
              flex-direction: row;
              margin-top: 10px;
              .line {
                margin-top: 3px;
                height: 18px;
                width: 6px;
                background: $red;
                border-radius: 20px;
                margin-right: 10px;
              }
              .title{
                font-size: 17px;
                font-weight: bold;
              }
            }
            .education-info{
              display: flex;
              flex-direction: row;
              width: 100%;
              .education-img{
                width: 50px;
                height: 50px;
                border-radius: 50px;
              }
              .education-item{
                margin-left: 20px;
                width: 100%;
                .name-item{
                  display: flex;
                  flex-direction: row;
                  margin-top: 16px;
                  .education-name{
                    font-size: 16px;
                    font-weight: bold;
                  }
                  .authentication{
                    background: #E8F3E3;
                    padding: 2px 4px;
                    font-size: 12px;
                    border-radius: 3px;
                    margin-left: 10px;
                    color: $darkGray;
                  }
                }
                .wage-item{
                  display: flex;
                  flex-direction: row;
                  font-size: 13px;
                  margin-top: 5px;
                  justify-content: space-between;
                  .post{
                    margin-right: 20px;
                    font-size: 12px;
                    margin-top: 10px;
                    margin-bottom: 20px;
                  }
                  .time{
                    font-size: 13px;
                    color: $darkGray;
                    margin-top: -30px;
                  }
                }
              }
            }
          }
          .language-block{
            .title-item{
              display: flex;
              flex-direction: row;
              margin-top: 10px;
              .line {
                margin-top: 3px;
                height: 18px;
                width: 6px;
                background: $red;
                border-radius: 20px;
                margin-right: 10px;
              }
              .title{
                font-size: 17px;
                font-weight: bold;
              }
            }
            .language-info{
              margin-top: 20px;
              display: flex;
              flex-direction: row;
              .authentication{
                background: #E8F3E3;
                padding: 2px 4px;
                font-size: 14px;
                border-radius: 3px;
                margin-left: 10px;
                color: #000;
              }
            }
          }
        }
      }
      .company-block{
        height: 120px;
        background: #fff;
        border-radius: 5px;
        padding:20px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        .title{
          font-size: 15px;
          font-weight: bold;
          margin-bottom: 20px;
        }
        .chat{
          width: 250px;
          height: 30px;
          background: $orange;
          color: #fff;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20px;
          border-radius: 5px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
